<?php
session_start();
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .main{
            width: 80%;
            margin:0 auto;
            text-align: center;
        }
        .main ul{
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        h2{
            text-align: center;
            font-size: 15px;
        }
        h2 a{
            margin-right: 15px;
            color: navy;
            text-decoration: none;
        }
        h2 a:last-child{
            margin-right: 0;
        }
        h2 a:hover{
            color: crimson;
            text-decoration: none;
        }
        .current{
            color: cyan;
        }
        .formOne{
            margin-top: 40px;
            text-align: center;
        }
        .formOne input{

        }
        .red{
            color: red;
        }
        .green{color: green}
        .black{color: blue}
        #loading{width: 40px;display: none;}
    </style>
</head>
<body>
<div class="main">
    <?php include_once 'nav.php'?>
</div>
<form class="formOne" action="postReg.php" method="post" onsubmit="return check()">
    <table align="center" border="1" style="border-collapse: collapse" cellpadding="10" cellspacing="0">
        <tr>
            <td align="right">用户名: </td>
            <td align="left"><input name="username" onblur="checkUsername()">
                <span class="red">* </span>
                <span id="usernameMsg"></span>
                <img src="./img/1.gif" id="loading">
            </td>

        </tr>
        <tr>
            <td align="right">密码: </td>
            <td align="left"><input type="password" name="pw"><span class="red">*</span></td>
        </tr>
        <tr>
            <td align="right">确认密码: </td>
            <td align="left"><input type="password" name="cpm"><span class="red">*</span></td>
        </tr>
        <tr>
            <td align="right">性别 </td>
            <td align="left">
                <input type="radio" name="sex" value="1" checked>男
                <input type="radio" name="sex" value="0">女
            </td>
        </tr>
        <tr>
            <td align="right">邮箱: </td>
            <td align="left"><input name="email"></td>
        </tr>
        <tr>
            <td align="right">兴趣爱好 </td>
            <td align="left">
                <input name="fav[]" type="checkbox" value="玩游戏">玩游戏
                <input name="fav[]" type="checkbox" value="王者">王者
                <input name="fav[]" type="checkbox" value="游戏">游戏
            </td>
        </tr>
        <tr>
            <td align="center"><input type="submit" value="提交"></td>
            <td align="left"><input type="reset" value="重置"></td>
        </tr>
    </table>
</form>
<script src="jquery-3.2.1.js"></script>
<script>
    function  checkUsername() {
        let userName = document.getElementsByName('username')[0].value.trim();
        let userNameReg = /^[a-zA-Z0-9_]{3,10}$/;
        if(!userNameReg.test(userName)){
            alert('用户名必须填写，且只能大小写字符和数字下划线组成，长度为3~10个字符');
            return false;
        }
        $.ajax({
            url:"checkUsername.php",
            type:'post',
            dataType:'json',
            data:{username:userName},
            beforeSend:function(){
                //beforeSend:发送之前
                $('#loading').show();
            },
            success:function (data)
                //成功后隐藏
                $('#loading').hide();
                //hide():隐藏
                if(data.code == 0){
                //    表名不可用
                    $("#usernameMsg").text(data.msg).removeClass('black').addClass('green');
                }else if(data.code == 2){
                //    表名可以
                    $("#usernameMsg").text(data.msg).removeClass('green').addClass('black');
                }
            },
            error:function () {
                $('#loading').hide();
                alert('网络错误');
            }
        })
    }
    function check() {

        let userName = document.getElementsByName('username')[0].value.trim();
        console.log(userName);
        let pw = document.getElementsByName('pw')[0].value.trim();
        let cpm = document.getElementsByName('cpm')[0].value.trim();
        let email = document.getElementsByName('email')[0].value.trim();
        let userNameReg = /^[a-zA-Z0-9_]{3,10}$/;
        if(!userNameReg.test(userName)){
            alert('用户名必须填写，且只能大小写字符和数字下划线组成，长度为3~10个字符');
            return false;
        }
      let pwReg =/^[a-zA-Z0-9_*]{6,10}$/;
        if(!pwReg.test(pw)){
            alert('密码必须填写，且只能大小写字符和数字下划线和*组成，长度为6~10个字符');
            return false;
        }else{
            if(pw != cpm){
                alert('密码和确认密码必须相同');
                return false;
            }
        }
        // let emailReg = /^[a-zA-Z0-9_\-]+@([a-zA-Z0-9]+\.)(com|con|arg|net)$/
        // if(email.length>0) {
        //     if (!emailReg.test(email)) {
        //         alert('邮箱格式不正确');
        //         return false;
        //     }
        // }
        let emailReg = /^[a-zA-Z0-9_\-]+@([a-zA-Z0-9]+\.)(com|cn|net|org)$/;
        if(email.length>0) {
                if (!emailReg.test(email)) {
                    alert('邮箱格式不正确');
                    return false;
                }
            }
        return true;
    }
</script>
</body>
</html>
